<template>
  <div class="AttributePanel">
    <div class="attribute-panel-header">
      {{ curWidget?.name || '属性设置' }}
    </div>
    <div class="attribute-panel-body oio-scrollbar" :key="curWidget?.id">
      <template v-for="(group, groupIndex) in attributeList" :key="groupIndex">
        <div class="attribute-group-item" v-if="group.list.length">
          <div class="group-title">{{ group.label }}</div>
          <div class="attribute-item-wrapper">
            <div
              class="attribute-item"
              v-for="(attributeItem, attributeItemIndex) in group.list"
              :key="attributeItemIndex"
            >
              <component
                :is="attributeItem.componentName"
                v-model:value="curWidget[group.key][attributeItem.key]"
                :componentData="attributeItem"
              />
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, inject } from 'vue'
import { getComponentAttribute } from '@/components/DesignerComponents'

export default defineComponent({
  name: 'AttributePanel',
  setup() {
    const curWidget: Record<string, any> = inject('curWidget', {})

    const attributeList: Record<string, any> = computed(() => {
      if (curWidget.value) {
        return getComponentAttribute(curWidget.value.componentName)
      } else {
        return {}
      }
    })

    return {
      curWidget,
      attributeList
    }
  }
})
</script>

<style lang="scss" scoped>
.AttributePanel {
  height: 100%;
  display: flex;
  flex-direction: column;
  .attribute-panel-header {
    font-size: 16px;
    font-weight: bold;
    height: 55px;
    line-height: 55px;
    padding: 0 16px;
    border-bottom: 1px solid #e3e7ee;
  }
  .attribute-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px;
    .attribute-group-item {
      .group-title {
        padding: 16px 0;
        font-size: 16px;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
        &::before {
          content: '';
          border-left: 2px solid #034dff;
          margin-right: 6px;
        }
      }
      .attribute-item-wrapper {
        .attribute-item {
        }
      }
    }
  }
}
</style>
